<template>
    <div class="LoadMore" @click="load">
        <span>{{text}}</span>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

let __this: any;

@Component({
    name: 'LoadMore'
})
export default class extends Vue {
    @Prop()
    private canLoad!: boolean;
    private number: number = 1;

    private get text(): string {
        return this.canLoad ? '点击加载更多' : '到底了';
    }

    private created(): void {
        __this = this;
    }

    private load(): void {
        if (this.canLoad) {
            this.$emit('load', this.number);
            this.number += 1;
        }
    }
    public static resize(): void {
        __this.number = 1;
    }
}
</script>

<style scoped lang="less">
.LoadMore {
    margin-top: 0.2rem;
    & span {
        font-size: 0.28rem;
        color: gray;
    }
    &:active {
        opacity: 0.7;
    }
}
</style>
